<template>
  <div class="category-content">
    <!-- 页面头部 -->
    <header class="category-header">
      <button class="back-button" @click="goBackToHome">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <div class="header-content">
        <h1 class="category-title">{{ currentCategory.name }}</h1>
        <p class="category-desc">{{ currentCategory.description }}</p>
      </div>
      <div class="category-stats">
        <span class="stat-item">{{ categoryPosts.length }} 个讨论</span>
        <span class="stat-item">{{ getTotalViews() }} 次浏览</span>
      </div>
    </header>

    <!-- 内容区域 -->
    <div class="category-main">
      <!-- 帖子列表 -->
      <div class="posts-section">
        <div class="section-header">
          <h2>讨论话题</h2>
          <div class="section-actions">
            <button class="create-post-btn" @click="createNewPost">发布新讨论</button>
            <button class="view-more-btn" @click="viewMorePosts">
              查看更多 <i class="icon-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div v-if="categoryPosts.length === 0" class="empty-state">
          <svg class="empty-icon" width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47683 9.24644 5 7.5 5C4.46243 5 2 7.46243 2 10.5C2 13.5376 4.46243 16 7.5 16C9.24644 16 10.8321 15.5232 12 14.7472M12 6.25278C13.1679 5.47683 14.7536 5 16.5 5C19.5376 5 22 7.46243 22 10.5C22 13.5376 19.5376 16 16.5 16C14.7536 16 13.1679 15.5232 12 14.7472" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <h3>暂无讨论</h3>
          <p>该分类下还没有讨论话题，快来发布第一个话题吧！</p>
        </div>

        <div class="posts-list">
          <div 
            v-for="post in categoryPosts" 
            :key="post.id"
            class="post-card"
            @click="handlePostClick(post.id)"
          >
            <div class="post-header">
              <img :src="post.avatar" alt="用户头像" class="post-avatar">
              <div class="post-author-info">
                <span class="post-author">{{ post.author }}</span>
                <span class="post-time">{{ post.time }}</span>
              </div>
              <div class="post-meta-small">
                <span class="post-views-small">{{ post.views }} 浏览</span>
                <span class="post-replies-small">{{ post.replies }} 回复</span>
              </div>
            </div>
            <h4 class="post-title">{{ post.title }}</h4>
            <p class="post-excerpt">{{ post.content }}</p>
            <div class="post-meta">
              <div class="post-tags">
                <span v-for="tag in getPostTags(post.id)" :key="tag" class="post-tag">{{ tag }}</span>
              </div>
              <div class="post-stats">
                <span class="post-views">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#666"/>
                  </svg>
                  {{ post.views }}
                </span>
                <span class="post-replies">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  {{ post.replies }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 攻略视频区 -->
      <div class="videos-section">
        <div class="section-header">
          <h2>攻略视频</h2>
          <button class="view-more-btn" @click="viewMoreVideos">
            查看更多 <i class="icon-arrow-right"></i>
          </button>
        </div>
        
        <div class="videos-grid">
          <div 
            v-for="video in getCategoryVideos()" 
            :key="video.id"
            class="video-card"
          >
            <div class="video-thumbnail">
              <img :src="video.thumbnail" alt="视频封面" class="video-img">
              <div class="video-duration">{{ video.duration }}</div>
            </div>
            <div class="video-info">
              <h4 class="video-title">{{ video.title }}</h4>
              <div class="video-meta">
                <span class="video-uploader">{{ video.uploader }}</span>
                <span class="video-views">{{ video.views }} 次播放</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关例子 -->
      <div class="examples-section">
        <div class="section-header">
          <h2>相关例子</h2>
          <button class="view-more-btn" @click="viewMoreExamples">
            查看更多 <i class="icon-arrow-right"></i>
          </button>
        </div>
        
        <div class="examples-grid">
          <div 
            v-for="example in getCategoryExamples()" 
            :key="example.id"
            class="example-card"
          >
            <h4 class="example-title">{{ example.title }}</h4>
            <p class="example-description">{{ example.description }}</p>
            <div class="example-stats">
              <span class="example-views">{{ example.views }} 次查看</span>
              <span class="example-likes">{{ example.likes }} 收藏</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const { categoryId } = route.params

// 论坛分类数据
const forumCategories = [
  { id: 'pets', name: '宠物', description: '关于宠物的一切问题' },
  { id: 'beauty', name: '美妆', description: '美妆护肤技巧分享' },
  { id: 'knowledge', name: '知识', description: '各种实用知识分享' },
  { id: 'electronics', name: '电子产品', description: '数码设备使用与推荐' },
  { id: 'education', name: '教育', description: '学习方法与教育资源' },
  { id: 'health', name: '健康医疗', description: '健康知识与医疗咨询' },
  { id: 'finance', name: '金融理财', description: '理财知识与投资建议' },
  { id: 'travel', name: '旅游', description: '旅行攻略与目的地推荐' }
]

// 模拟的帖子数据
const mockPosts = {
  electronics: [
    {
      id: '401',
      title: '如何选择适合自己的耳机？',
      content: '市面上耳机种类繁多，头戴式、入耳式、真无线等，如何根据自己的需求选择最适合的？',
      author: '音乐爱好者',
      avatar: 'https://picsum.photos/200/200?random=28',
      views: 876,
      replies: 134,
      time: '今天'
    },
    {
      id: '402',
      title: '电脑突然黑屏怎么办？',
      content: '电脑使用过程中突然黑屏，有什么简单的故障排查方法吗？',
      author: '电脑小白',
      avatar: 'https://picsum.photos/200/200?random=29',
      views: 765,
      replies: 123,
      time: '昨天'
    },
    {
      id: '403',
      title: '平板和笔记本该如何选择？',
      content: '纠结是买平板还是笔记本，两者各有什么优缺点？主要用于日常办公和娱乐。',
      author: '数码纠结者',
      avatar: 'https://picsum.photos/200/200?random=30',
      views: 654,
      replies: 112,
      time: '2天前'
    },
    {
      id: '404',
      title: '耳机选购全攻略',
      content: '从音质、舒适度、功能等多方面分析如何选购适合自己的耳机产品。',
      author: '音频达人',
      avatar: 'https://picsum.photos/200/200?random=31',
      views: 543,
      replies: 101,
      time: '3天前'
    },
    {
      id: '405',
      title: '电脑故障排查基础',
      content: '整理了一些常见电脑故障的排查和解决方法，适合新手学习。',
      author: 'IT工程师',
      avatar: 'https://picsum.photos/200/200?random=32',
      views: 432,
      replies: 90,
      time: '4天前'
    },
    {
      id: '406',
      title: '平板vs笔记本如何选择',
      content: '详细对比平板和笔记本的使用场景，帮助大家做出更明智的选择。',
      author: '数码测评师',
      avatar: 'https://picsum.photos/200/200?random=33',
      views: 321,
      replies: 79,
      time: '5天前'
    }
  ],
  education: [
    {
      id: '501',
      title: '如何提高学习效率？',
      content: '感觉自己学习效率不高，有什么好的学习方法可以推荐吗？',
      author: '学生党',
      avatar: 'https://picsum.photos/200/200?random=34',
      views: 987,
      replies: 156,
      time: '今天'
    },
    {
      id: '502',
      title: '考试前如何有效复习？',
      content: '考试临近，如何在有限的时间内进行高效复习？',
      author: '备考族',
      avatar: 'https://picsum.photos/200/200?random=35',
      views: 876,
      replies: 145,
      time: '昨天'
    },
    {
      id: '503',
      title: '如何提高英语口语水平？',
      content: '英语口语一直是弱项，有什么好的练习方法和学习资源推荐吗？',
      author: '英语学习者',
      avatar: 'https://picsum.photos/200/200?random=36',
      views: 765,
      replies: 134,
      time: '2天前'
    },
    {
      id: '504',
      title: '学习压力大如何缓解？',
      content: '面对繁重的学习任务，压力很大，有什么有效的减压方法吗？',
      author: '压力山大',
      avatar: 'https://picsum.photos/200/200?random=37',
      views: 654,
      replies: 123,
      time: '3天前'
    },
    {
      id: '505',
      title: '如何培养良好的学习习惯？',
      content: '想要养成好的学习习惯，但是总是坚持不下来，有什么建议吗？',
      author: '习惯养成中',
      avatar: 'https://picsum.photos/200/200?random=38',
      views: 543,
      replies: 112,
      time: '4天前'
    },
    {
      id: '506',
      title: '大学生如何规划课余时间？',
      content: '大学课余时间很多，如何合理规划才能让大学生活更充实有意义？',
      author: '大一新生',
      avatar: 'https://picsum.photos/200/200?random=39',
      views: 432,
      replies: 101,
      time: '5天前'
    }
  ],
  finance: [
    {
      id: '701',
      title: '新手如何开始基金投资？',
      content: '想尝试基金投资，作为新手应该从哪里开始？有什么需要注意的吗？',
      author: '理财新手',
      avatar: 'https://picsum.photos/200/200?random=40',
      views: 876,
      replies: 145,
      time: '今天'
    },
    {
      id: '702',
      title: '如何合理规划每月收入？',
      content: '刚工作不久，想学习如何合理规划每月收入，有什么好的建议吗？',
      author: '职场新人',
      avatar: 'https://picsum.photos/200/200?random=41',
      views: 765,
      replies: 134,
      time: '昨天'
    },
    {
      id: '703',
      title: '年轻人应该购买哪些保险？',
      content: '作为年轻人，应该优先考虑哪些保险产品？保额应该如何确定？',
      author: '保险小白',
      avatar: 'https://picsum.photos/200/200?random=42',
      views: 654,
      replies: 123,
      time: '2天前'
    },
    {
      id: '704',
      title: '如何建立紧急备用金？',
      content: '都说应该有紧急备用金，应该存多少比较合适？放在哪里比较好？',
      author: '财务规划中',
      avatar: 'https://picsum.photos/200/200?random=43',
      views: 543,
      replies: 112,
      time: '3天前'
    },
    {
      id: '705',
      title: '投资理财入门书籍推荐',
      content: '想系统学习投资理财知识，有哪些入门级的好书推荐吗？',
      author: '学习者',
      avatar: 'https://picsum.photos/200/200?random=44',
      views: 432,
      replies: 101,
      time: '4天前'
    }
  ],
  travel: [
    {
      id: '801',
      title: '国内小众旅行目的地推荐',
      content: '不想去热门景点人挤人，有什么风景优美又相对小众的旅行目的地推荐吗？',
      author: '旅行爱好者',
      avatar: 'https://picsum.photos/200/200?random=45',
      views: 987,
      replies: 156,
      time: '今天'
    },
    {
      id: '802',
      title: '旅行预算如何规划？',
      content: '计划一次旅行，如何合理规划预算，既能玩得开心又不会超支？',
      author: '精打细算',
      avatar: 'https://picsum.photos/200/200?random=46',
      views: 876,
      replies: 145,
      time: '昨天'
    },
    {
      id: '803',
      title: '独自旅行需要注意什么？',
      content: '第一次尝试独自旅行，有什么安全和其他方面需要特别注意的吗？',
      author: '独行侠',
      avatar: 'https://picsum.photos/200/200?random=47',
      views: 765,
      replies: 134,
      time: '2天前'
    },
    {
      id: '804',
      title: '旅行摄影技巧分享',
      content: '出去旅行想拍出好看的照片，有什么适合新手的摄影技巧吗？',
      author: '摄影小白',
      avatar: 'https://picsum.photos/200/200?random=48',
      views: 654,
      replies: 123,
      time: '3天前'
    },
    {
      id: '805',
      title: '旅行必备物品清单',
      content: '每次旅行都怕遗漏重要物品，有什么全面的旅行必备物品清单吗？',
      author: '准备出发',
      avatar: 'https://picsum.photos/200/200?random=49',
      views: 543,
      replies: 112,
      time: '4天前'
    }
  ],
  health: [
    {
      id: '601',
      title: '办公室人员如何保护颈椎？',
      content: '长期久坐办公室，颈椎经常感到不适，有什么好的保护和缓解方法吗？',
      author: '白领小王',
      avatar: 'https://picsum.photos/200/200?random=16',
      views: 987,
      replies: 145,
      time: '今天'
    },
    {
      id: '602',
      title: '科学减重的方法有哪些？',
      content: '想健康地减轻体重，不想节食伤害身体，有什么科学的减重方法推荐吗？',
      author: '健身爱好者',
      avatar: 'https://picsum.photos/200/200?random=17',
      views: 876,
      replies: 123,
      time: '昨天'
    },
    {
      id: '603',
      title: '每天喝多少水才合适？',
      content: '关于每天饮水量的说法有很多，到底应该喝多少水才科学健康？',
      author: '养生达人',
      avatar: 'https://picsum.photos/200/200?random=18',
      views: 765,
      replies: 98,
      time: '2天前'
    },
    {
      id: '604',
      title: '春季如何预防过敏？',
      content: '每到春季就容易过敏，打喷嚏、流鼻涕，有什么好的预防和缓解方法吗？',
      author: '过敏患者',
      avatar: 'https://picsum.photos/200/200?random=19',
      views: 654,
      replies: 87,
      time: '3天前'
    },
    {
      id: '605',
      title: '如何提高睡眠质量？',
      content: '经常失眠，睡眠质量不好，第二天精神状态差，有什么改善睡眠的建议吗？',
      author: '失眠困扰者',
      avatar: 'https://picsum.photos/200/200?random=20',
      views: 543,
      replies: 76,
      time: '4天前'
    },
    {
      id: '606',
      title: '中医养生小常识分享',
      content: '分享一些简单实用的中医养生方法，适合日常生活中实践。',
      author: '中医爱好者',
      avatar: 'https://picsum.photos/200/200?random=21',
      views: 432,
      replies: 65,
      time: '5天前'
    },
    {
      id: '607',
      title: '办公室健康小贴士',
      content: '长时间在办公室工作，需要注意哪些健康问题？有什么改善建议？',
      author: '职场健康顾问',
      avatar: 'https://picsum.photos/200/200?random=22',
      views: 321,
      replies: 54,
      time: '6天前'
    },
    {
      id: '608',
      title: '儿童营养与健康',
      content: '孩子成长发育阶段，如何保证营养均衡，促进健康成长？',
      author: '育儿专家',
      avatar: 'https://picsum.photos/200/200?random=23',
      views: 210,
      replies: 43,
      time: '1周前'
    },
    {
      id: '609',
      title: '季节性疾病预防指南',
      content: '不同季节容易发生的疾病有哪些？如何做好预防措施？',
      author: '健康科普员',
      avatar: 'https://picsum.photos/200/200?random=24',
      views: 198,
      replies: 32,
      time: '1周前'
    },
    {
      id: '610',
      title: '家庭急救小常识',
      content: '日常生活中可能遇到的突发状况，应该掌握哪些基本的急救知识？',
      author: '急救培训师',
      avatar: 'https://picsum.photos/200/200?random=25',
      views: 187,
      replies: 21,
      time: '2周前'
    }
  ],
  pets: [
    {
      id: '101',
      title: '如何训练狗狗定点大小便？',
      content: '家里的狗狗总是随地大小便，有什么有效的训练方法吗？已经尝试了一些方法但效果不佳。',
      author: '爱宠人士',
      avatar: 'https://picsum.photos/200/200?random=1',
      views: 789,
      replies: 123,
      time: '今天'
    },
    {
      id: '102',
      title: '猫咪掉毛严重怎么办？',
      content: '每到换毛季，家里到处都是猫毛，有什么好的解决办法吗？',
      author: '猫咪铲屎官',
      avatar: 'https://picsum.photos/200/200?random=2',
      views: 654,
      replies: 98,
      time: '昨天'
    },
    {
      id: '103',
      title: '养宠物需要准备哪些物品？',
      content: '第一次养宠物，不知道需要准备哪些必备物品，求推荐！',
      author: '新手铲屎官',
      avatar: 'https://picsum.photos/200/200?random=3',
      views: 521,
      replies: 87,
      time: '2天前'
    }
  ],
  beauty: [
    {
      id: '201',
      title: '新手如何化日常妆容？',
      content: '作为化妆新手，想学习简单的日常妆容，有什么推荐的教程或产品吗？',
      author: '美妆小白',
      avatar: 'https://picsum.photos/200/200?random=4',
      views: 890,
      replies: 145,
      time: '今天'
    },
    {
      id: '202',
      title: '如何选择适合自己的护肤品？',
      content: '面对众多护肤品品牌和产品，不知道如何选择适合自己肤质的，求指导。',
      author: '护肤达人',
      avatar: 'https://picsum.photos/200/200?random=5',
      views: 765,
      replies: 123,
      time: '昨天'
    },
    {
      id: '203',
      title: '敏感肌肤护理心得分享',
      content: '自己是敏感肌肤，经过多年摸索总结了一些护理经验，希望能帮助到大家。',
      author: '敏感肌患者',
      avatar: 'https://picsum.photos/200/200?random=6',
      views: 654,
      replies: 108,
      time: '2天前'
    }
  ],
  knowledge: [
    {
      id: '301',
      title: '如何提高阅读效率？',
      content: '想读更多的书，但阅读速度太慢，有什么方法可以提高阅读效率吗？',
      author: '爱书人',
      avatar: 'https://picsum.photos/200/200?random=7',
      views: 678,
      replies: 112,
      time: '今天'
    },
    {
      id: '302',
      title: '家庭网络如何搭建更稳定？',
      content: '家里网络总是不稳定，尤其是多个设备同时使用时，有什么好的解决方案吗？',
      author: '网络工程师',
      avatar: 'https://picsum.photos/200/200?random=8',
      views: 543,
      replies: 98,
      time: '昨天'
    },
    {
      id: '303',
      title: '新手如何学习编程？',
      content: '零基础想学习编程，应该从哪种语言开始学起？有什么好的学习资源推荐吗？',
      author: '编程入门',
      avatar: 'https://picsum.photos/200/200?random=9',
      views: 789,
      replies: 134,
      time: '2天前'
    }
  ]
}

// 模拟的视频数据
const mockVideos = {
  electronics: [
    {
      id: 'v401',
      title: '2023年耳机选购指南',
      thumbnail: 'https://picsum.photos/640/360?random=50',
      duration: '12:30',
      uploader: '数码测评',
      views: '4.8万'
    },
    {
      id: 'v402',
      title: '电脑常见故障排查教程',
      thumbnail: 'https://picsum.photos/640/360?random=51',
      duration: '15:45',
      uploader: 'IT教学',
      views: '3.6万'
    }
  ],
  education: [
    {
      id: 'v501',
      title: '高效学习方法分享',
      thumbnail: 'https://picsum.photos/640/360?random=52',
      duration: '18:20',
      uploader: '学习方法论',
      views: '5.2万'
    },
    {
      id: 'v502',
      title: '英语口语提升技巧',
      thumbnail: 'https://picsum.photos/640/360?random=53',
      duration: '14:10',
      uploader: '英语学习',
      views: '4.5万'
    }
  ],
  finance: [
    {
      id: 'v701',
      title: '基金投资入门课',
      thumbnail: 'https://picsum.photos/640/360?random=54',
      duration: '20:30',
      uploader: '理财课堂',
      views: '3.8万'
    },
    {
      id: 'v702',
      title: '年轻人的保险配置指南',
      thumbnail: 'https://picsum.photos/640/360?random=55',
      duration: '16:45',
      uploader: '保险科普',
      views: '2.9万'
    }
  ],
  travel: [
    {
      id: 'v801',
      title: '国内小众旅行地探索',
      thumbnail: 'https://picsum.photos/640/360?random=56',
      duration: '22:15',
      uploader: '旅行日志',
      views: '6.3万'
    },
    {
      id: 'v802',
      title: '旅行摄影入门技巧',
      thumbnail: 'https://picsum.photos/640/360?random=57',
      duration: '17:30',
      uploader: '摄影教学',
      views: '5.1万'
    }
  ],
  health: [
    {
      id: 'v601',
      title: '5分钟颈椎保健操',
      thumbnail: 'https://picsum.photos/640/360?random=26',
      duration: '05:30',
      uploader: '健康生活',
      views: '3.2万'
    },
    {
      id: 'v602',
      title: '科学减重全攻略',
      thumbnail: 'https://picsum.photos/640/360?random=27',
      duration: '15:45',
      uploader: '健身教练',
      views: '4.7万'
    }
  ],
  pets: [
    {
      id: 'v101',
      title: '狗狗基础训练教程：如何让狗狗听话',
      thumbnail: 'https://picsum.photos/640/360?random=10',
      duration: '12:35',
      uploader: '宠物训练师',
      views: '2.5万'
    },
    {
      id: 'v102',
      title: '猫咪健康护理指南：定期检查与 grooming',
      thumbnail: 'https://picsum.photos/640/360?random=11',
      duration: '15:20',
      uploader: '猫咪baike',
      views: '1.8万'
    }
  ],
  beauty: [
    {
      id: 'v201',
      title: '5分钟快速日常妆容教程',
      thumbnail: 'https://picsum.photos/640/360?random=12',
      duration: '08:15',
      uploader: '美妆达人',
      views: '5.6万'
    },
    {
      id: 'v202',
      title: '敏感肌肤护理全攻略',
      thumbnail: 'https://picsum.photos/640/360?random=13',
      duration: '14:30',
      uploader: '护肤专家',
      views: '4.2万'
    }
  ],
  knowledge: [
    {
      id: 'v301',
      title: '高效阅读技巧分享',
      thumbnail: 'https://picsum.photos/640/360?random=14',
      duration: '11:40',
      uploader: '学习方法专家',
      views: '3.5万'
    },
    {
      id: 'v302',
      title: '家庭网络优化指南',
      thumbnail: 'https://picsum.photos/640/360?random=15',
      duration: '16:25',
      uploader: '网络工程师',
      views: '2.8万'
    }
  ]
}

// 模拟的例子数据
const mockExamples = {
  electronics: [
    {
      id: 'e401',
      title: '耳机选购实战案例',
      description: '一位音乐爱好者分享了自己从需求分析到最终选购的完整过程和经验总结。',
      views: 2345,
      likes: 567
    },
    {
      id: 'e402',
      title: '电脑故障自救经历',
      description: '详细记录了一次电脑突然黑屏故障的排查和解决过程，适合作为参考。',
      views: 1890,
      likes: 456
    }
  ],
  education: [
    {
      id: 'e501',
      title: '三个月提升英语听力的方法',
      description: '一位学习者分享了通过系统训练在三个月内显著提升英语听力的方法。',
      views: 2567,
      likes: 678
    },
    {
      id: 'e502',
      title: '高效复习计划模板',
      description: '分享一个经过实践验证的高效复习计划表，包含时间分配和重点难点突破方法。',
      views: 3456,
      likes: 890
    }
  ],
  finance: [
    {
      id: 'e701',
      title: '从零开始的理财之路',
      description: '一位年轻人分享了自己从理财小白到实现财务自由的十年理财经历。',
      views: 2890,
      likes: 765
    },
    {
      id: 'e702',
      title: '年轻人的保险配置方案',
      description: '详细分析了不同年龄段年轻人的保险需求和最适合的保险产品组合。',
      views: 2134,
      likes: 543
    }
  ],
  travel: [
    {
      id: 'e801',
      title: '一个人的西藏之旅',
      description: '分享了独自前往西藏旅行的完整攻略，包括路线规划、预算控制和安全提示。',
      views: 3890,
      likes: 987
    },
    {
      id: 'e802',
      title: '旅行摄影装备清单',
      description: '根据不同旅行场景推荐的摄影装备清单，从入门级到专业级都有覆盖。',
      views: 2678,
      likes: 654
    }
  ],
  health: [
    {
      id: 'e601',
      title: '颈椎康复案例分享',
      description: '一位办公室工作者通过坚持做保健操和调整工作姿势，成功改善了颈椎问题的真实经历。',
      views: 1890,
      likes: 456
    },
    {
      id: 'e602',
      title: '家庭急救包配置指南',
      description: '家庭必备急救物品清单及使用方法，关键时刻能派上用场。',
      views: 2345,
      likes: 567
    }
  ],
  pets: [
    {
      id: 'e101',
      title: '训练拉布拉多的成功案例',
      description: '一位网友分享了如何在3个月内训练好一只调皮的拉布拉多，从随地大小便到听话懂事的全过程。',
      views: 1245,
      likes: 321
    },
    {
      id: 'e102',
      title: '猫咪家庭环境布置参考',
      description: '打造一个让猫咪舒适的家庭环境，包含猫爬架、猫砂盆、饮食区的合理布置方案。',
      views: 987,
      likes: 256
    }
  ],
  beauty: [
    {
      id: 'e201',
      title: '不同肤质的护肤方案',
      description: '干性、油性、混合性、敏感性肌肤的不同护肤方案和产品推荐。',
      views: 2345,
      likes: 567
    },
    {
      id: 'e202',
      title: '夏日妆容持久技巧',
      description: '在炎热的夏天如何让妆容保持持久不脱妆的实用技巧分享。',
      views: 1890,
      likes: 432
    }
  ],
  knowledge: [
    {
      id: 'e301',
      title: '思维导图学习法案例',
      description: '一位学生使用思维导图学习法提高学习效率的真实案例分享。',
      views: 1987,
      likes: 456
    },
    {
      id: 'e302',
      title: '家庭网络布线方案',
      description: '不同户型的家庭网络布线最佳方案，解决WiFi信号死角问题。',
      views: 2456,
      likes: 521
    }
  ]
}

// 帖子标签数据
const postTags = {
  '401': ['耳机选购', '电子产品', '音质对比'],
  '402': ['电脑故障', '故障排查', '硬件维修'],
  '403': ['平板', '笔记本', '数码选择'],
  '404': ['耳机选购', '音频设备', '全攻略'],
  '405': ['电脑维护', '故障排查', '新手教程'],
  '406': ['数码对比', '平板', '笔记本'],
  '501': ['学习效率', '学习方法', '时间管理'],
  '502': ['考试复习', '备考技巧', '高效学习'],
  '503': ['英语口语', '语言学习', '交流技巧'],
  '504': ['学习压力', '心理调节', '减压方法'],
  '505': ['习惯养成', '自律', '时间管理'],
  '506': ['大学生活', '时间规划', '自我提升'],
  '701': ['基金投资', '理财入门', '新手教程'],
  '702': ['收入规划', '理财技巧', '个人财务'],
  '703': ['保险选择', '风险管理', '保障规划'],
  '704': ['备用金', '应急资金', '财务安全'],
  '705': ['理财书籍', '投资理财', '学习资源'],
  '801': ['小众目的地', '旅行推荐', '深度游'],
  '802': ['旅行预算', '省钱技巧', '旅行规划'],
  '803': ['独自旅行', '安全提示', '旅行经验'],
  '804': ['旅行摄影', '摄影技巧', '风景拍摄'],
  '805': ['旅行必备', '物品清单', '出行准备'],
  '601': ['颈椎保护', '办公室健康', '职业病预防'],
  '602': ['科学减重', '健康生活', '运动健身'],
  '603': ['健康饮水', '日常保健', '生活习惯'],
  '604': ['过敏预防', '春季健康', '呼吸系统'],
  '605': ['睡眠质量', '失眠改善', '作息调整'],
  '606': ['中医养生', '传统医学', '调理方法'],
  '607': ['办公室健康', '工作习惯', '姿势调整'],
  '608': ['儿童营养', '成长发育', '均衡饮食'],
  '609': ['疾病预防', '季节性健康', '免疫力提升'],
  '610': ['家庭急救', '安全知识', '应急处理'],
  '101': ['狗狗训练', '新手教程', '行为纠正'],
  '102': ['猫咪护理', '换毛季', '清洁技巧'],
  '103': ['养宠准备', '新手必读', '宠物用品'],
  '201': ['日常妆容', '新手教程', '快速上妆'],
  '202': ['护肤品选择', '肤质判断', '产品推荐'],
  '203': ['敏感肌肤', '护理心得', '产品避雷'],
  '301': ['阅读技巧', '效率提升', '学习方法'],
  '302': ['网络优化', '家庭网络', '故障排除'],
  '303': ['编程学习', '入门指南', '资源推荐']
}

// 当前分类信息
const currentCategory = ref(forumCategories.find(cat => cat.id === categoryId) || {
  id: categoryId, 
  name: categoryId || '未知分类', 
  description: '暂无描述'
})

// 当前分类的帖子列表
const categoryPosts = ref(mockPosts[categoryId] || [])

// 监听路由参数变化，更新分类信息
watch(() => route.params.categoryId, (newCategoryId) => {
  if (newCategoryId) {
    currentCategory.value = forumCategories.find(cat => cat.id === newCategoryId) || {
      id: newCategoryId, 
      name: newCategoryId || '未知分类', 
      description: '暂无描述'
    }
    categoryPosts.value = mockPosts[newCategoryId] || []
  }
}, { immediate: true })

// 查看更多帖子
const viewMorePosts = () => {
  router.push(`/category/${categoryId}/posts`)
}

// 查看更多视频
const viewMoreVideos = () => {
  alert(`查看${currentCategory.value.name}分类的更多视频`)
}

// 查看更多例子
const viewMoreExamples = () => {
  alert(`查看${currentCategory.value.name}分类的更多例子`)
}

// 处理帖子点击
const handlePostClick = (postId) => {
  router.push(`/post/${postId}?category=${categoryId}`)
}

// 返回首页
const goBackToHome = () => {
  router.push('/home')
}

// 创建新帖子
const createNewPost = () => {
  router.push(`/new-post?category=${categoryId}`)
}

// 获取帖子标签
const getPostTags = (postId) => {
  return postTags[postId] || []
}

// 获取分类视频
const getCategoryVideos = () => {
  return mockVideos[categoryId] || []
}

// 获取分类例子
const getCategoryExamples = () => {
  return mockExamples[categoryId] || []
}

// 获取总浏览量
const getTotalViews = () => {
  return categoryPosts.value.reduce((total, post) => total + post.views, 0)
}

// 监听路由参数变化，修复分类切换不更新的问题
watch(() => route.params.categoryId, (newCategoryId) => {
  if (newCategoryId && newCategoryId !== categoryId) {
    // 更新当前分类信息
    const updatedCategory = forumCategories.find(cat => cat.id === newCategoryId) || {
      id: newCategoryId, 
      name: newCategoryId || '未知分类', 
      description: '暂无描述'
    }
    
    // 更新分类数据
    currentCategory.value = updatedCategory
    categoryPosts.value = mockPosts[newCategoryId] || []
    
    // 从本地存储加载用户发布的帖子
    loadUserPosts(newCategoryId)
  }
})

// 从本地存储加载用户帖子
const loadUserPosts = (currentCategoryId) => {
  const storedPosts = localStorage.getItem('posts')
  if (storedPosts) {
    try {
      const posts = JSON.parse(storedPosts)
      const userPosts = posts.filter(post => post.category === currentCategoryId)
      if (userPosts.length > 0) {
        // 合并用户发布的数据和模拟数据
        const mockData = mockPosts[currentCategoryId] || []
        categoryPosts.value = [...userPosts, ...mockData]
      }
    } catch (error) {
      console.error('加载用户帖子数据失败:', error)
    }
  }
}

// 页面加载时初始化
onMounted(() => {
  loadUserPosts(categoryId)
})
</script>

<style scoped>
/* 分类页面内容区域 */
.category-content {
  flex: 1;
  padding: 20px;
  min-height: 100vh;
}

/* 页面头部 */
.category-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e67e22;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.back-button:hover {
  background-color: #f5f5f5;
}

.header-content {
  flex: 1;
}

.category-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.category-desc {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.category-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.stat-item {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 主内容区域 */
.category-main {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 各部分通用样式 */
.posts-section,
.videos-section,
.examples-section {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.section-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.view-more-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background-color: transparent;
  border: 1px solid #e67e22;
  color: #e67e22;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.view-more-btn:hover {
  background-color: #e67e22;
  color: white;
}

.create-post-btn {
  background-color: #e67e22;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.create-post-btn:hover {
  background-color: #d35400;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.empty-icon {
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333;
}

.empty-state p {
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}

/* 帖子列表 */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 帖子卡片 */
.post-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s;
  cursor: pointer;
  border-left: 4px solid transparent;
}

.post-card:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #e67e22;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.post-author-info {
  flex: 1;
}

.post-author {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: block;
}

.post-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.post-meta-small {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
}

.post-excerpt {
  font-size: 15px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-tag {
  background-color: #e67e22;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.post-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}

.post-views,
.post-replies {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #666;
}

/* 视频网格 */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* 视频卡片 */
.video-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.video-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 16px;
}

.video-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
}

/* 例子网格 */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* 例子卡片 */
.example-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.example-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #e67e22;
}

.example-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.example-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.example-stats {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .category-content {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .category-stats {
    align-items: flex-start;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .videos-grid,
  .examples-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .category-content {
    padding: 12px;
  }
  
  .category-title {
    font-size: 24px;
  }
  
  .section-header h2 {
    font-size: 20px;
  }
  
  .post-card,
  .example-card {
    padding: 16px;
  }
  
  .post-title,
  .example-title {
    font-size: 16px;
  }
}
</style>